<template>
  <Layout>
    <el-card shadow="never" class="social">
      <el-tabs v-model="tabVal" type="card" @tab-click="handleTabsChange">
        <el-tab-pane key="followers" :label="'粉丝 ' + followersInfo.count" name="followers">
          <el-row>
            <el-col :span="8" v-for="item in followers" :key="item.id" class="fan">
              <el-card shadow="hover" class="fan-card">
                <div>
                  <i class="el-icon-star-off"></i>&emsp;
                  <g-link :to="'/person/' + item.login">{{item.login}}</g-link>
                </div>
                <div>
                  <i class="el-icon-message"></i>&emsp;
                  <g-link :to="'https://github.com/' + item.login">TA的主页</g-link>
                </div>
                <img :src="item.avatar_url" alt class="images" />
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane key="following" :label="'关注 ' + followingInfo.count" name="following">
          <el-row>
            <el-col :span="8" v-for="item in following" :key="item.id" class="fan">
              <el-card shadow="hover" class="fan-card">
                <div>
                  <i class="el-icon-star-off"></i>&emsp;
                  <g-link :to="'/person/' + item.login">{{item.login}}</g-link>
                </div>
                <div>
                  <i class="el-icon-message"></i>&emsp;
                  <g-link :to="'https://github.com/' + item.login">TA的主页</g-link>
                </div>
                <img :src="item.avatar_url" alt class="images" />
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <div style="text-align: center">
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :current-page="tabVal === 'followers' ? followersInfo.currentPage : followingInfo.currentPage"
        :page-size="9"
        :total="tabVal === 'followers' ? followersInfo.count : followingInfo.count"
        hide-on-single-page
      ></el-pagination>
    </div>
  </Layout>
</template>

<page-query>
query($page: Int) {
  allFollowers (perPage: 9, page: $page) @paginate {
    totalCount
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        login
        avatar_url
      }
    }
  }
  allFollowing (perPage: 9, page: $page) @paginate {
    totalCount
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        login
        avatar_url
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: "社交圈"
  },
  data() {
    return {
      tabVal: "followers"
    };
  },
  computed: {
    followers() {
      let followers = [];
      this.$page.allFollowers.edges.forEach(x => followers.push(x.node));
      return followers;
    },
    followersInfo() {
      let followersInfo = {};
      followersInfo.count = this.$page.allFollowers.totalCount;
      followersInfo.currentPage = this.$page.allFollowers.pageInfo.currentPage;
      return followersInfo;
    },
    following() {
      let following = [];
      this.$page.allFollowing.edges.forEach(x => following.push(x.node));
      return following;
    },
    followingInfo() {
      let followingInfo = {};
      followingInfo.count = this.$page.allFollowing.totalCount;
      followingInfo.currentPage = this.$page.allFollowing.pageInfo.currentPage;
      return followingInfo;
    }
  },
  methods: {
    handleTabsChange(e) {
      this.tabVal = e.name;
      this.$router.push("/social").catch(() => {});
    },
    changePage(i) {
      if (i > 1) this.$router.push("/social/" + i).catch(() => {});
      else this.$router.push("/social").catch(() => {});
    }
  }
};
</script>

<style scoped>
a {
  color: #1e6bb8;
}
.fan {
  padding: 10px;
}
.fan-card {
  font-size: 13px;
}
.images {
  width: 100%;
  border-radius: 5px;
  margin-top: 5px;
}
</style>
